<template>
  <div class="ele-body ele-body-card">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="15">
      <el-col :md="5" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" class="ele-tag-round">
            <i class="el-icon-s-custom"></i>
          </el-tag>
          <div class="monitor-count-card-num">{{ data.people }}</div>
          <div class="monitor-count-card-text ele-text-secondary">问卷填写人数</div>
        </el-card>
      </el-col>
      <el-col :md="5" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" type="warning" class="ele-tag-round">
            <i class="el-icon-_sent"></i>
          </el-tag>
          <div class="monitor-count-card-num">{{ data.finish_people }}</div>
          <div class="monitor-count-card-text ele-text-secondary">问卷完成人数</div>
        </el-card>
      </el-col>
      <el-col :md="6" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" type="danger" class="ele-tag-round">
            <i class="el-icon-s-flag"></i>
          </el-tag>
          <div class="monitor-count-card-num">{{ bili }}%</div>
          <div class="monitor-count-card-text ele-text-secondary">问卷完成率</div>
        </el-card>
      </el-col>
      <el-col :md="4" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" type="success" class="ele-tag-round">
            <i class="el-icon-user"></i>
          </el-tag>
          <div class="monitor-count-card-num">{{ data.boy_people }}</div>
          <div class="monitor-count-card-text ele-text-secondary">男宝人数</div>
        </el-card>
      </el-col>
      <el-col :md="4" :sm="12">
        <el-card shadow="never" class="monitor-count-card">
          <el-tag size="large" type="danger" class="ele-tag-round">
            <i class="el-icon-user"></i>
          </el-tag>
          <div class="monitor-count-card-num">{{ data.girl_people }}</div>
          <div class="monitor-count-card-text ele-text-secondary">女宝人数</div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 用户分布、浏览器分布 -->
    <el-row :gutter="15">
      <el-col :lg="18">
        <el-card body-style="padding: 0;" shadow="never" v-loading="chartLoading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(255, 255, 255, 0.8)">
          <div class="ele-cell demo-monitor-tool">
            <div class="ele-cell-content">
              问卷人数统计
            </div>
            <div class="ele-inline-block hidden-xs-only">
              <el-radio-group v-model="chartDataSearch.date_type" size="small" @input="changeChartDataDateType">
                <el-radio-button :label="1">本周</el-radio-button>
                <el-radio-button :label="2">本月</el-radio-button>
                <el-radio-button :label="5">上周</el-radio-button>
                <el-radio-button :label="4">上个月</el-radio-button>
                <el-radio-button :label="3">本年</el-radio-button>
              </el-radio-group>
            </div>
            <div class="ele-inline-block hidden-sm-and-down" style="width: 260px;">
              <el-date-picker
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                @change="changeChartDataDateTime"
                v-model="chartDataSearch.datetime"
                class="ele-fluid"
                end-placeholder="结束日期"
                range-separator="至"
                size="small"
                start-placeholder="开始日期"
                type="daterange" unlink-panels/>
            </div>
          </div>
          <el-divider/>
          <el-row>
            <el-col :lg="24" :md="24">
              <div class="demo-monitor-title ele-text-primary" style="text-align: center;">
                <h4 class="ele-text-info">
                  {{ chartDataStatistics }}
                </h4>
              </div>
              <ele-chart
                ref="chartData"
                :option="chartDataOption"
                style="height: 410px;"/>
            </el-col>
          </el-row>
        </el-card>

      </el-col>
      <el-col :lg="6">
        <el-row :gutter="15">
          <el-col :lg="24" :md="12" :sm="24">
            <el-card shadow="never" header="宝贝平均年龄">
              <div class="monitor-online-num-card">
                <div class="monitor-online-num-title">
                  {{data.avg_age}} 岁
                </div>
                <div class="monitor-online-num-text">最大：{{data.max_age}} 岁，最小：{{data.min_age}} 岁</div>
                <div class="monitor-online-num-text">&nbsp;</div>
              </div>
            </el-card>
          </el-col>
          <el-col :lg="24" :md="12" :sm="24">
            <el-card
              shadow="never"
              header="问卷结果"
              body-style="padding: 0 10px;">
              <ele-chart
                ref="browserChart"
                style="height: 240px;"
                :option="browserChartOption"/>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="15">
      <el-col :lg="24">
        <el-card shadow="never" class="monitor-count-card" header="分类统计">
          <ele-chart
            ref="chartData"
            :option="chartDataOption2"
            style="height: 410px;"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EleChart from 'ele-admin/packages/ele-chart';

export default {
  name: 'DashboardMonitor',
  components: {EleChart},
  data() {
    return {
      data: {
        people: 0,
        finish_people: 0,
        boy_people: 0,
        girl_people: 0,
        avg_age: 0,
        max_age: 0,
        min_age: 0
      },
      // 浏览器分布环形图数据
      browserCountData: [],
      chartLoading: false,
      chartDataSearch: {
        type: 'count',
        date_type: 1,
        datetime: ''
      },
      chartData: [],
      chartSeries: [],
      chart2Data: [],
      chart2Series: [],
    };
  },
  computed: {
    // 浏览器分布饼图配置
    browserChartOption() {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          data: this.browserCountData.map(d => d.name),
          bottom: 5,
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle'
        },
        series: [
          {
            type: 'pie',
            radius: ['45%', '70%'],
            center: ['50%', '43%'],
            itemStyle: { // 设置每个数据项的样式
              color: function(params) { // 自定义颜色函数
                if (params.name === '异常') {
                  return '#c23531'
                } else if (params.name === '正常') {
                  return '#25b83b'
                }
              }
            },
            label: {
              show: false
            },
            data: this.browserCountData
          }
        ]
      };
    },
    bili() {
      let roundedNum = Math.round((this.data.finish_people/this.data.people) * 100); // 四舍五入到两位小数
      roundedNum = roundedNum.toFixed(2); // 转换为字符串并保留两位小数
      return roundedNum
    },
    seriesData() {
      let data = []
      this.chartSeries.forEach(item => {
        console.log(item)
        data.push({
          name: item.label,
          type: 'bar',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            opacity: 0.3
          },
          data: this.chartData.map(d => d[item.key][this.chartDataSearch.type])
        })
      })
      return data
    },
    // 统计图配置
    chartDataOption() {
      return {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.chartSeries.map(d => d.label),
          right: 20
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: this.chartData.map(d => d.date)
          }
        ],
        yAxis: [
          {
            type: 'value',
          }
        ],
        series: this.seriesData
      };
    },
    chartDataOption2() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: this.chart2Data
        },
        series: this.chart2Series
      };
    },
    chartDataStatistics() {
      if (this.chartSeries.length > 0 && this.chartData.length > 0) {
        let count = 0
        this.chartSeries.forEach(item => {
          this.chartData.forEach(d => {
            count += d[item.key].count
          })
        })
        return `共计新增用户 ${count} 人`
      }
      return ''
    }
  },
  mounted() {
    this.getData()
    this.getChartData()
    this.getChart2Data()
  },
  methods: {
    changeChartDataDateTime(value) {
      this.chartDataSearch.date_type = -1
      this.chartDataSearch.datetime = value
      this.getChartData()
    },

    changeChartDataDateType(value) {
      this.chartDataSearch.date_type = value
      this.chartDataSearch.datetime = ''
      this.getChartData()
    },
    getChartData() {
      this.chartLoading = true
      let searchQuery = Object.assign(this.chartDataSearch, {})
      this.$http.post('/attentionstatistics/getChartData', searchQuery).then(res => {
        if (res.data.code === 0) {
          this.chartSeries = res.data.data.series
          this.chartData = res.data.data.data
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      }).finally(() =>{
        this.chartLoading = false
      });
    },
    getChart2Data() {
      // this.chartLoading = true
      let searchQuery = Object.assign(this.chartDataSearch, {})
      this.$http.post('/attentionstatistics/getChart2Data', searchQuery).then(res => {
        if (res.data.code === 0) {
          this.chart2Series = res.data.data.series
          this.chart2Data = res.data.data.data
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      }).finally(() =>{
        // this.chartLoading = false
      });
    },
    getData() {
      this.$http.get('/attentionstatistics/stat').then(res => {
        if (res.data.code === 0) {
          this.data = res.data.data;
          this.browserCountData = res.data.data.pie
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    /* 获取用户浏览器分布数据 */
    getBrowserCountData() {
      this.browserCountData = [
        {name: '正常', value: 10},
        {name: '异常', value: 40}
      ];
    }
  },
  activated() {
    ['browserChart'].forEach((name) => {
      this.$refs[name].resize();
    });
  },
}
</script>

<style scoped>
/* 统计卡片 */
.monitor-count-card ::v-deep .el-card__body {
  padding-top: 18px;
  text-align: center;
  position: relative;
}

.monitor-count-card ::v-deep .el-tag {
  border-color: transparent;
  font-size: 15px;
}

.monitor-count-card .monitor-count-card-num {
  font-weight: 500;
  font-size: 32px;
  margin-top: 12px;
}

.monitor-count-card .monitor-count-card-text {
  font-size: 12px;
  margin: 10px 0;
}

.monitor-count-card .monitor-count-card-trend {
  font-weight: 600;
  padding: 6px 0;
}

.monitor-count-card .monitor-count-card-trend > i {
  font-size: 12px;
  font-weight: 600;
  margin-right: 5px;
}

.monitor-count-card .monitor-count-card-tips {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}

/* 当前在线人数卡片 */
.monitor-online-num-card {
  text-align: center;
  padding: 5px 0;
}

.monitor-online-num-text {
  margin-bottom: 5px;
}

.monitor-online-num-title {
  font-size: 48px;
  margin-bottom: 10px;
}

@media screen and (max-width: 1200px) {
  .monitor-online-num-card {
    padding: 42px 0;
  }
}

/* 笑脸、哭脸 */
.monitor-face-smile,
.monitor-face-cry {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #FBD971;
  border-radius: 50%;
  position: relative;
}

.monitor-face-smile > span,
.monitor-face-smile:before,
.monitor-face-smile:after,
.monitor-face-cry > span,
.monitor-face-cry:before,
.monitor-face-cry:after {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transform: rotate(225deg);
  border: 3px solid #F0C419;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  position: absolute;
  bottom: 8px;
  left: 11px;
}

.monitor-face-smile:before,
.monitor-face-smile:after,
.monitor-face-cry:before,
.monitor-face-cry:after {
  content: "";
  width: 6px;
  height: 6px;
  left: 8px;
  top: 14px;
  border-color: #F29C1F;
  transform: rotate(45deg);
}

.monitor-face-smile:after,
.monitor-face-cry:after {
  left: auto;
  right: 8px;
}

.monitor-face-cry > span {
  transform: rotate(45deg);
  bottom: -6px;
}

/* 圆形进度条组合 */
.monitor-progress-group {
  position: relative;
  display: inline-block;
}

.monitor-progress-group .el-progress:not(:first-child) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -1px;
}

.monitor-progress-legends > div + div {
  margin-top: 8px;
}


/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 8px 20px;
}

.demo-monitor-tool ::v-deep .el-tabs__nav-wrap:after {
  display: none;
}

.demo-monitor-tool ::v-deep .el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
}

.demo-monitor-tool .el-date-editor {
  width: 256px;
  margin-left: 10px;
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

</style>
